<template>
  <div class="m-check-card app-container">
    <el-card>
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="合同名称：">
          <el-input v-model="searchForm.contractName" placeholder="请输入合同名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList()">
            <el-icon><search /></el-icon>&nbsp;搜索
          </el-button>
          <el-button @click="reSet()">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add('0')">
            <el-icon><ShoppingCart /></el-icon>&nbsp;新增采购合同
          </el-button>
          <el-button type="primary" @click="add('1')">
            <el-icon><Sell /></el-icon>&nbsp;新增销售合同
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="m-list" v-loading="loading">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div style="display: flex">
            <div class="title-text" style="cursor: default"
              ><svg-icon icon-class="project-name" /> {{ projectInfo?.project?.projectBrief }}</div
            >
            <div class="title-text" :class="{ active: infoType === '2' }" @click="getInfo('2')"
              >概况</div
            >
            |
            <div class="title-text" :class="{ active: infoType === '0' }" @click="getInfo('0')"
              >采购合同</div
            >|
            <div class="title-text" :class="{ active: infoType === '1' }" @click="getInfo('1')"
              >销售合同</div
            >
          </div>
          <div>
            <el-button
              type="success"
              icon="Position"
              @click="
                router.push({
                  name: 'projectInfo',
                  state: { id: projectInfo?.project?.id },
                })
              "
            >
              项目详情
            </el-button>
          </div>
        </div>
      </template>
      <div v-if="infoType !== '2'">
        <div v-if="projectList.length">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in projectList" :key="index" class="card-box">
              <el-card shadow="hover" @click="gotoHome(item.id)" style="cursor: pointer">
                <template #header>
                  <el-tag
                    size="large"
                    :color="item.contractState === '已完成' ? '#67c23a' : ''"
                    style="position: relative; float: right; right: -20px; top: -18px"
                  >
                    {{ item.contractState }}
                  </el-tag>
                  <div class="card-header">
                    <span style="font-size: 16px; font-weight: 600">{{ item.contractName }}</span>
                  </div>
                </template>
                <div class="content-text">
                  <el-icon><User /></el-icon>
                  &nbsp;&nbsp;采购方：{{ item.procurementName }}
                </div>
                <div class="content-text">
                  <el-icon><User /></el-icon>
                  &nbsp;&nbsp;供应商：{{ item.vendorName }}
                </div>
                <div class="content-text">
                  <el-icon><Clock /></el-icon>
                  &nbsp;&nbsp;金额：{{ numberFormat(item.contractAmount) }}&nbsp;元
                </div>
                <div class="content-text">
                  <el-icon><Clock /></el-icon>
                  &nbsp;&nbsp;日期：{{ item.contractDate }}
                </div>
                <div class="content-text">
                  <el-icon><User /></el-icon>
                  &nbsp;&nbsp;录入人：{{ item.createName }}
                </div>
              </el-card>
            </el-col>
          </el-row>
          <div class="pagination">
            <el-pagination
              v-model:currentPage="searchForm.pageNum"
              v-model:page-size="searchForm.pageSize"
              :page-sizes="[8, 12, 16, 20]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            /> </div
        ></div>
        <div v-else> <el-empty description="什么都没有╮(╯▽╰)╭" /></div>
      </div>
      <div v-else class="projectInfo">
        <div>
          <div class="head">
            <div class="head">
              <div class="title">
                <span>项目信息：</span>
              </div>
              <el-row :gutter="20" style="margin: 0">
                <el-col :span="24" style="padding: 0">
                  <div class="col-content">
                    <div class="label-info"
                      ><svg-icon icon-class="project-name" class="icons" />
                      项目简称
                    </div>
                    <div class="content-info">
                      {{ projectInfo?.project?.projectBrief }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" style="padding: 0">
                  <div class="col-content">
                    <div class="label-info"
                      ><svg-icon icon-class="project-type" class="icons" />
                      项目类型
                    </div>
                    <div class="content-info">
                      {{ projectInfo?.project?.projectType }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" style="padding: 0">
                  <div class="col-content">
                    <div class="label-info"
                      ><svg-icon icon-class="light-user" class="icons" />
                      客户名称
                    </div>
                    <div class="content-info">
                      {{ projectInfo?.project?.clientName }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" style="padding: 0">
                  <div class="col-content">
                    <div class="label-info"
                      ><svg-icon icon-class="light-user" class="icons" />
                      负责人
                    </div>
                    <div class="content-info">
                      {{ projectInfo?.project?.chargeNickname }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" style="padding: 0">
                  <div class="col-content">
                    <div class="label-info"
                      ><svg-icon icon-class="money-rmb" class="icons" />
                      项目金额
                    </div>
                    <div class="content-info">
                      {{ numberFormat(projectInfo?.project?.estimatePrice) }}&nbsp;元
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" style="padding: 0">
                  <div class="col-content">
                    <div class="label-info"
                      ><svg-icon icon-class="date" class="icons" />
                      启动时间
                    </div>
                    <div class="content-info">
                      {{ projectInfo?.project?.projectStartTime }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="8" style="padding: 0">
                  <div class="col-content">
                    <div class="label-info"
                      ><svg-icon icon-class="state" class="icons" />
                      项目状态
                    </div>
                    <div class="content-info">
                      {{ projectInfo?.project?.projectStatus }}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="head" v-if="projectInfo?.flag">
            <div class="title">
              <span>项目应收/付情况：</span>
            </div>
            <div>
              <MyEcharts :option="MoneyOption"></MyEcharts>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div>
      <AddContractDrawer ref="addContactDrawer" @getData="searchList" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { ref, onMounted } from 'vue'
  import AddContractDrawer from './components/addContractDrawer.vue'
  import MyEcharts from '@/components/myEcharts/index.vue'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { postMarketingContractSearch } from '@/api/controller/marketing-contract-controller/index'
  import { postProcurementContractSearch } from '@/api/controller/procurement-contract-controller/index'
  import { getProjectGetAbstractById } from '@/api/controller/project-controller/index'
  import { usePermissionStore } from '@/store/modules/permission'
  const PermissionStore = usePermissionStore()
  const router = useRouter()
  //跳转合同详情页
  const gotoHome = (id) => {
    router.push({
      name: 'contractInfo',
      state: { contractId: id, contractType: infoType.value },
    })
  }
  const total = ref()
  const projectList = ref<any>([])
  const projectInfo = ref()
  const searchForm = ref({
    projectNumber: history.state?.projectNumber,
    contractName: '',
    pageNum: 1,
    pageSize: 8,
  })
  const projectNum = ref(history.state?.projectNumber)
  const projectId = ref(history.state?.id)
  //获取数据
  const loading = ref(true)
  const infoType = ref('2')
  const moneybaseOption = ref({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [],
        type: 'bar',
        label: {
          show: true, // 显示数值
          position: 'top', // 在顶部显示
        },
      },
    ],
  })
  const MoneyOption = ref(null)

  const searchList = async () => {
    try {
      loading.value = true
      MoneyOption.value = null
      let res
      if (infoType.value === '1') {
        res = await postMarketingContractSearch(searchForm.value)
        projectList.value = res.data.list
        total.value = res.data.total
      } else if (infoType.value === '0') {
        res = await postProcurementContractSearch(searchForm.value)
        projectList.value = res.data.list
        total.value = res.data.total
      } else {
        res = await getProjectGetAbstractById({ id: projectId.value })
        if (res.code === 200) {
          projectInfo.value = res.data
          let option = JSON.parse(JSON.stringify(moneybaseOption.value))
          for (let i = 0; i < projectInfo.value.mapList.length; i++) {
            option.xAxis.data.push(projectInfo.value.mapList[i].name)
            let color = ''
            switch (Math.ceil((i + 1) / 3)) {
              case 1:
                color = '#5470c6'
                break
              case 2:
                color = '#91cc75'
                break
              case 3:
                color = '#fac858'
                break
              case 4:
                color = '#ee6666'
                break
            }
            option.series[0].data.push({
              value: projectInfo.value.mapList[i].price,
              itemStyle: {
                color: color,
              },
            })
          }
          MoneyOption.value = option
        }
      }
    } finally {
      PermissionStore.setCacheFlag(true)
      loading.value = false
    }
  }

  //重置搜索
  const reSet = () => {
    searchForm.value = {
      projectNumber: projectNum.value,
      contractName: '',
      pageNum: 1,
      pageSize: 8,
    }
    searchList()
  }

  //分页
  const handleSizeChange = (val: number) => {
    searchForm.value.pageSize = val
    searchList()
  }
  const handleCurrentChange = (val: number) => {
    searchForm.value.pageNum = val
    searchList()
  }

  //新增合同抽屉
  const addContactDrawer = ref()
  const add = (data) => {
    addContactDrawer.value.show(projectNum.value, data)
  }

  //获取销售或采购合同
  const getInfo = (type) => {
    infoType.value = type
    reSet()
  }
  const TagsViewStore = useTagsViewStore()
  //初始化
  onMounted(async () => {
    TagsViewStore.setHistory(history.state)
    await searchList()
  })
</script>

<style lang="scss" scoped>
  .m-list {
    margin-top: 10px;
    ::v-deep(.el-card__footer) {
      padding: 6px;
    }
    ::v-deep(.el-tag) {
      border: #0090f0;
      background-color: #0090f0;
      color: #fff;
    }
    .title-text {
      font-size: 16px;
      color: #666;
      font-weight: 700;
      padding: 0px 16px;
      cursor: pointer;
      &.active {
        font-size: 18px;
        color: #1890ff;
      }
    }
    .card-header {
      display: -webkit-box; /* 使用弹性盒子布局模型 */
      -webkit-box-orient: vertical; /* 垂直排列子元素 */
      -webkit-line-clamp: 1; /* 限制在两行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      line-height: 1.5em;
    }
  }
  .content-text {
    font-size: 14px;
    line-height: 30px;
    color: rgba($color: #000000, $alpha: 0.8);
    display: -webkit-box; /* 使用弹性盒子布局模型 */
    -webkit-box-orient: vertical; /* 垂直排列子元素 */
    -webkit-line-clamp: 1; /* 限制在两行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
  }
  .pagination {
    margin: 10px 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    .footer-text {
      margin-left: 0px;
      font-size: 12px;
      color: #333;
    }
    .item-child {
      flex: 1;
      padding: 8px 0;
      color: #7f7f7f;
      position: relative;
      cursor: pointer;
      font-size: 12px;
    }
    .item-child:after {
      position: absolute;
      right: 0;
      content: '';
      display: block;
      height: 20px;
      border-right: 1px solid #e4e7ed;
    }
    .item-child:last-child:after {
      display: none;
    }
  }
  .el-card {
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }

  .a {
    color: rgb(118, 214, 247);
  }
  .card-box {
    margin-bottom: 20px;
  }
  .projectInfo {
    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      span {
        font-size: 16px;
        font-weight: 700;
      }
    }
    .head {
      background-color: white;
      padding: 10px;
    }
  }
  .col-content {
    display: flex;
    height: 100%;
    .label-info {
      display: flex;
      align-items: center;
      justify-content: end;
      color: #606266;
      font-weight: bold;
      font-size: 14px;
      background-color: #f5f7fa;
      min-width: 100px;
      border: 1px solid #ebeef5;
      padding: 10px;
      .icons {
        margin-right: 6px;
        height: 16px;
        width: 16px;
      }
    }
    .content-info {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10px;
      border: 1px solid #ebeef5;
    }
  }
</style>
